<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: pink;
				/* 绑定动画 
				animation:动画名称 持续时间 ；infinite：无限的
				*/
				animation: change 5s infinite linear;
			}
			/* 动画:
			step1:创建关键帧 
			step2:绑定动画
			*/
			@keyframes change{
				from{/* 开始帧 */
				width: 300px;
				height: 300px;
				transform: rotate(0);
				}
				to{/* 结束帧 */
				width: 1200px;
				height: 100px;
				transform: rotate(360deg);
				background: ur1(img/123.png) no-repeat center/100% 100%;
				}
			}
			/* @-webkit-keyframes name{
				from{}
				to{}
			}
			@-moz-keyframes name{
				from{}
				to{}
			}
			@-ms-keyframes name{
				from{}
				to{}
			} */
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>